import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import OrderView from '../views/OrderView.vue'
import GameView from '../views/GameView.vue'
import ImageView from '../views/ImageView.vue'
import AnimationView from '@/views/AnimationView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    children:[
      {
        path:'/order',
        name:'order',
        component:OrderView
      },{
        path:'/game/:id',
        name:'game',
        component:GameView
      },{
        path:'/image',
        name:'image',
        component:ImageView
      },{
        path:'/animation',
        name:'animation',
        component:AnimationView
      }
    ]
  },{
    path: '/login',
    name: 'login',
    component: LoginView
  },{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
